iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
Mobile Development

Android Studio初學系列 第 25

Android Studio初學 DAY25 Shpae客製元件樣式

  • 分享至 

  • xImage
  •  

Shape Drawable是一個XML文件,它定義了一個可繪製的形狀,可以用來作為視圖元件的背景或前景,在本文中,我們將探討如何使用Shape Drawable來自定義Android應用程式中的元件

基本形狀

Shape Drawable可以用來創建許多基本形狀,例如矩形、圓形、橢圓形等。以下是一個簡單的示例,如何創建一個紅色的矩形
首先先在Drawable創一個XML

XML布局

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#FF0000" /> <!-- 填充顏色為紅色 -->
    <corners android:radius="10dp" /> <!-- 圓角半徑為10dp -->
</shape>

在上面的示例中,我們定義了一個Shape Drawable,它具有紅色的實心填充和圓角角落。可以將這個Drawable設置為任何元件的背景,以使該元件呈現為紅色的圓角矩形

接著就是到元件去引用

    <TextView
        android:id="@+id/textView"
        android:layout_width="126dp"
        android:layout_height="49dp"
        android:layout_marginTop="340dp"
        android:background="@drawable/shape"
        android:text="TextView"
        android:gravity="center" />

動態修改Shape Drawable

除了在XML中定義Shape Drawable之外,你還可以在代碼中動態修改它。這將允許你根據應用程序的狀態或用戶操作來改變視圖元件的外觀。

要在代碼中修改Shape Drawable,你需要獲取視圖元件的背景,然後設置新的Drawable。以下是一個簡單的範例,演示如何在按鈕點擊時動態改變按鈕的背景

public class MainActivity extends AppCompatActivity {
    private Button button2;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button2 = findViewById(R.id.button2);
        textView = findViewById(R.id.textView);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 創建一個新的Shape Drawable,例如一個藍色的圓角矩形
                ShapeDrawable newDrawable = new ShapeDrawable(new RectShape());
                newDrawable.getPaint().setColor(Color.BLUE);
                newDrawable.getPaint().setStyle(Paint.Style.FILL);
                newDrawable.getPaint().setAntiAlias(true);

                // 設置新的Drawable為按鈕的背景
                textView.setBackground(newDrawable);
            }
        });
    }
}

結果如下


上一篇
Android Studio初學 DAY24 RxJava應用
下一篇
Android Studio初學 DAY26 Recyclerview結合Dialog
系列文
Android Studio初學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言